<template>
  <el-menu :default-active="$route.path" :collapse="isCollapse" :default-openeds="openedArr" router>
    <template v-for="itemOne in ListArr || []" :key="itemOne">
      <el-sub-menu v-if="itemOne.children" :index="itemOne.path">
        <template #title>
          <span>{{ itemOne.title }}</span>
        </template>
        <template v-for="itemTwo in itemOne.children" :key="itemTwo">
          <el-sub-menu v-if="itemTwo.children" :index="itemTwo.path">
            <template #title>
              <span>{{ itemTwo.title }}</span>
            </template>
            <el-menu-item
              :index="itemThree.path"
              v-for="itemThree in itemTwo.children"
              :key="itemThree"
              >{{ itemThree.title }}</el-menu-item
            >
          </el-sub-menu>
          <template v-if="!itemTwo.children">
            <el-menu-item :index="itemTwo.path">
              <span>{{ itemTwo.title }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-sub-menu>
      <template v-if="!itemOne.children">
        <el-menu-item :index="itemOne.path">
          <span>{{ itemOne.title }}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script setup>
  import ListArr from 'src/mock';

  const openedArr = ListArr.map(item => item.path);
</script>

<style scoped lang="scss"></style>
